<template>
  <BaseDialog
    ref="baseDialog"
    :title="isEdit ? '编辑权限' : '编辑权限'"
    @confrim="confrim"
    @cancel="close"
  >
    <BaseForm
      labelWidth="150px"
      :fromIems="fromIems"
      :size="'medium'"
      ref="BaseForm"
      @submit="submit"
      @edit="edit"
    >
      <template #tree>
        <el-tree
          ref="tree"
          default-expand-all
          :data="treeData"
          check-strictly
          show-checkbox
          node-key="permCode"
          :props="{
            children: 'children',
            label: 'name',
          }"
          @check-change="handleNodeClick"
        ></el-tree>
      </template>
    </BaseForm>
  </BaseDialog>
</template>

<script>
import { Message } from "element-ui";
import { set, getRoleBtns } from "@/api/role";
import { listAll } from "@/api/menu";
export default {
  name: "add",
  data() {
    return {
      title: "",
      fromIems: [
        {
          valueType: "input",
          label: "角色ID",
          dataIndex: "name",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
          defaultValue: null,
          props: {
            disabled: true,
            style: {
              width: "220px",
            },
          },
        },
        {
          valueType: "tree",
          label: "角色权限",
          dataIndex: "permCodes",
          slotName: "tree",
          rules: [{ required: true, message: "请选择", trigger: "blur" }],
        },
      ],
      isEdit: false,
      treeData: [],
    };
  },
  methods: {
    open(row) {
      this.fromIems[0].defaultValue = row.roleId;
      this.$refs.baseDialog.open();
      this.handleinitTree(); //查询树
      this.$nextTick(() => {
        if (row) {
          this.getRoleBtnsByID(row); //获取角色权限回显
          for (var k in row) {
            this.$set(this.$refs.BaseForm.form, k, row[k]);
          }
        } else {
          this.$refs.BaseForm.form = {};
        }
      });
    },
    async handleinitTree() {
      const res = await listAll({ platform: 1 });
      this.treeData = res.content;
    },
    async getRoleBtnsByID(row) {
      const res = await getRoleBtns({ roleId: row.roleId });
      if (!res.status && res.content && res.content.length) {
        // 如果有则是编辑
        this.isEdit = true;
        this.$set(
          this.$refs.BaseForm.form,
          "permCodes",
          res.content.split(",")
        );
        console.log(res.content.split(","));
        res.content.split(",").forEach((permCode) => {
          setTimeout(() => {
            this.$refs.tree.setChecked(permCode, true);
          }, 500);
        });
      }
    },

    handleNodeClick(data, ischeck) {
      // console.log(data, ischeck);
      if (ischeck && data.children && !this.isEdit) {
        data.children.forEach((el) => {
          this.$refs.tree.setChecked(el.permCode, true);
        });
      }
      if (!ischeck && data.children && !this.isEdit) {
        data.children.forEach((el) => {
          this.$refs.tree.setChecked(el.permCode, false);
        });
      }
      let selectNodes = this.$refs.tree.getCheckedKeys();
      console.log(selectNodes, "已选择");
      this.$set(this.$refs.BaseForm.form, "permCodes", selectNodes);
    },
    close() {
      this.$refs.baseDialog.close();
      this.$refs.BaseForm.rest();
    },
    confrim() {
      if (this.isEdit) {
        this.$refs.BaseForm.edit();
      } else {
        this.$refs.BaseForm.submit();
      }
    },
    async submit(data) {
      // 配置权限
      const res = await set({
        roleId: data.roleId,
        permCodes: data.permCodes.join(","),
      });
      if (!res.status) {
        this.$emit("success");
        Message.success("success");
        this.close();
      }
    },
    async edit(data) {
      // 配置权限
      const res = await set({
        roleId: data.roleId,
        permCodes: data.permCodes.join(","),
      });
      if (!res.status) {
        this.$emit("success");
        Message.success("success");
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
